<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
				font-weight: 600;
			}

			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				color: red;
				border-bottom: 2px solid red;
			}

			.header {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				padding: 10px;
				padding-bottom: 0;
				padding-top: 25px;
				background-color: #fff;
			}

			.main {
				margin-top: 120px;
			}

			.main .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				border-bottom: none;
				color: #9e9e9e;
			}

			.huodong,
			.tuijian {
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				background-color: #fff;
				padding: 10px;
				margin-bottom: 10px;
			}

			.huodong-item,
			.tuijian-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.huodong-item img,
			.tuijian-item img {
				width: 50px;
				height: 50px;
				margin-bottom: 10px;
			}

			.huodong-item div {
				font-size: 14px;
				color: #9e9e9e;
			}

			.tuijian-item div {
				color: #e02e24;
				font-weight: 700;
			}

			.tuijian-item span {
				font-size: 20px;
			}

			.shop {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				padding: 0 10px;
				gap: 10px;
			}

			.shop-item {
				border-radius: 8px;
				background-color: #fff;
				overflow: hidden;
			}

			.shop-item img {
				width: 100%;
				height: 120px;
			}

			.shop-item .info {
				padding: 10px;
			}

			.shop-item .info .title {
				font-size: 16px;
			}

			.shop-item .info .price {
				font-weight: 700;
				font-size: 16px;
				color: #e44f48;
			}

			.shop-item .info span {
				font-size: 20px;
			}
		</style>
	</head>

	<body>
		<!-- 头部 -->
		<header class="header">
			<div class="mui-input-row mui-search">
				<!-- 搜索框 -->
				<input id="search" type="search" class="mui-input-clear" placeholder="随机">
			</div>
			<!-- 切换分类 -->
			<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div id="fl" class="mui-scroll">

				</div>
			</div>
		</header>
		<!-- 主体 -->
		<div class="main">
			<!-- 活动推荐 -->
			<div class="huodong">

			</div>
			<!-- 推荐商品 -->
			<div class="tuijian">

			</div>
			<!-- 商品列表 -->
			<div class="shop">

			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="libs/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
			mui.plusReady(function() {

			})
			document.getElementById('search').addEventListener('focus', function() {
				mui.openWindow('shop_search.html', 'shop_search.html', {})
			})
			mui('.shop').on('tap', '.shop-item', function() {
				localStorage.setItem('detailid',this.getAttribute('data-id'))
				mui.openWindow('shop_detail.html', 'shop_detail.html', {})
			})
			mui('.tuijian').on('tap', '.tuijian-item', function() {
				localStorage.setItem('detailid',this.getAttribute('data-id'))
				mui.openWindow('shop_detail.html', 'shop_detail.html', {})
			})

			var categoryId = 0;
			post('/api/category/list').then(res => {
				console.log(res);
				if (res.code == 1) {
					var data = res.data
					var s = ''
					mui.each(data, function(index, e) {
						s += `<a data-id="${e.id}" class="mui-control-item ${index==0?'mui-active':''}">
						${e.name}
					</a>`
					})
					document.getElementById("fl").innerHTML = s

					categoryId = data[0].id
					post('/api/product/list', {
						categoryId
					}).then(res => {
						console.log(res);
						if (res.code == 1) {
							var data = res.data
							var s = ''
							var s2 = ''
							var s3 = ''
							mui.each(data, function(index, e) {
								if (e.items.length > 0) {
									var images = e.items[0].images
									var price = e.items[0].price
									var img = images.split(',')[0]
									s += `<div class="huodong-item">
										<img src="${resUrl+img}" alt="" style="width: 65px;height: 65px;" />
										<div>${e.name}</div>
									</div>`

									s2 += `<div data-id="${e.id}" class="shop-item">
										<img src="${resUrl+img}" alt="" />
										<div class="info">
											<div class="title">${e.name}</div>
											<p class="desc">${e.description}</p>
											<div class="price">
												￥<span>${price}</span>
											</div>
										</div>
									</div>`
									if (index < 5) {
										s3 += `<div data-id="${e.id}" class="tuijian-item">
											<img src="${resUrl+img}" alt="" style="width: 65px;height: 65px;" />
											<div>￥<span>${price}</span></div>
										</div>`
									}
								}
							})
							document.querySelector(".huodong").innerHTML = s
							document.querySelector(".shop").innerHTML = s2
							document.querySelector(".tuijian").innerHTML = s3

						} else {
							mui.toast(res.msg)
						}
					})
				} else {
					mui.toast(res.msg)
				}
			})
		</script>
	</body>

</html>